<template>
    <div class="progress-stats">
        <div class="progress-item" v-for="progress in processingStats" :key="progress.type">
            <div class="progress-info">
                <span class="label">{{ progress.type }}</span>
                <span class="value">{{ progress.value }}</span>
            </div>
            <el-progress :percentage="progress.percentage" :color="progress.color" :stroke-width="8"
                :format="percentageFormat" />
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';

let props = defineProps({
    alarms: {
        type: Array,
        default: () => []
    },
});

// 处理进度数据
const processingStats = computed(() => {
    let alarms = props.alarms;
    let total = alarms.length;
    let resolved = alarms.filter(alarm => alarm.status === 2).length;
    let unresolved = alarms.filter(alarm => alarm.status === 1).length;
    let ignored = alarms.filter(alarm => alarm.status === 3).length;

    return [
        {
            type: '已处理',
            value: resolved,
            percentage: total === 0 ? 0 : parseFloat(((resolved / total) * 100).toFixed(2)),
            color: '#67C23A'
        },
        {
            type: '待处理',
            value: unresolved,
            percentage: total === 0 ? 0 : parseFloat(((unresolved / total) * 100).toFixed(2)),
            color: '#F56C6C'
        },
        {
            type: '已忽略',
            value: ignored,
            percentage: total === 0 ? 0 : parseFloat(((ignored / total) * 100).toFixed(2)),
            color: '#909399'
        }
    ]
})

// 格式化百分比显示，保留两位小数
const percentageFormat = (percentage) => {
    return percentage.toFixed(2) + '%';
}
</script>

<style scoped>
.progress-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-item .progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-info .label {
    color: var(--el-text-color-secondary);
}

.progress-info .value {
    font-weight: 500;
}
</style>